<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/api/user/css/common.css}">
    <link rel="stylesheet" th:href="@{/api/user/styles/login.css}">
    <link rel="stylesheet" th:href="@{/api/user/styles/header.css}">
    <link rel="stylesheet" th:href="@{/api/user/plugins/sweetalert/sweetalert.css}"/>
</head>
<body>
<!--<div class="top center">-->
<!--    <div class="logo center">-->
<!--        <a href="./error_login.html" target="_blank"><img src="/api/user/image/uflower2.jpg" alt="" style="height: 110px"></a>-->
<!--    </div>-->
<!--</div>-->

<div class="form center">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">注册</div>
                <div class="right fr">您已有账号？<a href="login" target="_self">请登录</a></div>
                <div class="clear"></div>
                <div class="under-line center"></div>
            </div>
<!--            <form id="singleUploadForm" method="get" action="thirdparty/oss/policy">-->
<!--                <div class="login-info">-->
<!--                    <label for="header-file" style="clear: left">头&nbsp;&nbsp;&nbsp;&nbsp;像:&nbsp;</label>-->
<!--                    &lt;!&ndash;                        <button class="" accept="image/*" type="file" name="header" placeholder="请上传你的头像" id="header"></button>&ndash;&gt;-->
<!--                    <img src="/api/user/image/default.png" id="header" onclick="$(this).next().click();" style="float:left;width: auto; height: auto;max-width: 100%;max-height: 100%;"-->
<!--                         onerror="this.src='/api/user/image/default.png'">-->
<!--                    <input type="file" id="header-file" onchange="inputFile(this)" accept="image/*">-->
<!--                    &lt;!&ndash;                        <button type="button" id="header-file" class="header-file" style="font-size: 12px;border-radius: 3px;background:#1baeae;color: #fff;"><span>点击上传头像</span></button>&ndash;&gt;-->
<!--                </div>-->
<!--                <div class="singleUpload_submit">-->
<!--                    <input class="submit" type="button" onclick="singleUpload()" value="确定">-->
<!--                </div>-->
<!--            </form>-->
            <form id="registerForm" onsubmit="return false;" action="##">
                <div class="login_main center align-self-center">
                    <div class="login-info">
                        <label for="username">用户名:&nbsp;</label><input class="login-info-input" type="text" name="username"
                                                                                           placeholder="请输入你的用户名" id="username"/>
                    </div>
                    <div class="login-info">
                        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;</label><input class="login-info-input" type="password" name="password" id="password" placeholder="请输入你的密码"/>
                    </div>
                    <div class="login-info"><label for="phone">手机号:&nbsp;</label><input class="login-info-input" type="tel" name="phone"
                                                                              placeholder="请输入你的手机号" id="phone"/>
                    </div>
                    <div class="login-info"><label for="nickname">昵&nbsp;&nbsp;&nbsp;&nbsp;称:&nbsp;</label><input class="login-info-input" type="text" name="nickname"
                                                                                 placeholder="请输入你的昵称" id="nickname"/>
                    </div>
                    <div class="login-info"><label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;</label><input class="login-info-input" type="email" name="email"
                                                                              placeholder="请输入你的邮箱" id="email"/>
                    </div>
                    <div class="login-info">
                        <label for="birthday">生&nbsp;&nbsp;&nbsp;&nbsp;日:&nbsp;</label><input class="" type="date" name="birthday" placeholder="请输入你的生日" id="birthday"/>
                    </div>
                    <div class="login-info">性&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;
                        <input class="" type="radio" name="gender" value=1 id="gender"/>男&nbsp;&nbsp;&nbsp;&nbsp;
                        <input class="" type="radio" name="gender" value=0 />女
                    </div>
<!--                    <div class="login-info">头&nbsp;&nbsp;&nbsp;&nbsp;像:&nbsp;&nbsp;-->
<!--                        <input type="text" id="file_name" readonly="readonly" />-->
<!--                        <a href="javascript:void(0);" class="input">-->
<!--                            浏览-->
<!--                            <input type="file" id="file" name="document[file]">-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    <div class="login-info">-->
<!--                        验证码:&nbsp;-->
<!--                        <input class="login-info-input verify-code" type="text" name="verifyCode" id="verifyCode"-->
<!--                               placeholder="请输入验证码"/>-->
<!--                        <img alt="单击图片刷新！" style="top: 16px;position: relative;" th:src="@{/common/user/kaptcha}"-->
<!--                             onclick="this.src='/common/user/kaptcha?d='+new Date()*1">-->
<!--                    </div>-->
                </div>
                <div class="login_submit">
                    <input class="submit" type="button" onclick="register()" value="立即注册">
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<!-- jQuery -->
<script th:src="@{/api/user/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/api/user/dist/js/public.js}"></script>
<script th:src="@{/api/user/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    document.getElementById('birthday').valueAsDate = new Date();
    $(function(){
        $("#file").change(function(){  // 当 id 为 file 的对象发生变化时
            var fileSize = this.files[0].size;
            var size = fileSize / 1024 / 1024;
            if (size > 5) {
                swal("附件不能大于5M,请将文件压缩后重新上传！",{
                    icon: "error",
                });
                this.value="";
                return false;
            }else{
                $("#file_name").val($("#file").val());  //将 #file 的值赋给 #file_name
            }
        })
    });

    //注册按钮onclick事件改为register()即可
    function register() {
        var username = $("#username").val();
        if (!validUserName(username)) {
            swal('请输入正确的用户名', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        var phone = $("#phone").val();
        if (!validPhoneNumber(phone)) {
            swal('请输入正确的手机号', {
                icon: "error",
            });
            return false;
        }
        var nickname = $("#nickname").val();
        if (!validUserName(nickname)) {
            swal('请输入正确的昵称', {
                icon: "error",
            });
            return false;
        }
        var email = $("#email").val();
        if (!validEmall(email)) {
            swal('请输入正确的邮箱', {
                icon: "error",
            });
            return false;
        }

        // var verifyCode = $("#verifyCode").val();
        // if (!validLength(verifyCode, 5)) {
        //     swal('请输入正确的验证码', {
        //         icon: "error",
        //     });
        //     return false;
        // }
        var header = null;
        var status = 1;
        var createTime = new Date();
        //验证
        //将json数组转为json 对象
        var params = $("#registerForm").serializeArray();
        // 转为json数据格式
        var obj = {};//分配内存空间
        for (var i = 0; i < params.length; i++) {//数据类型为"自定义类的字段名=数据"后台会自动对数据进行匹配
            obj[params[i].name] = params[i].value;
        }
        // console.log(obj)
        var url = '/api/user/user/save';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: JSON.stringify(obj),  //请求参数，将对象转json字符串,
            contentType:'application/json;charset=UTF-8', //请求数据类型,
            success: function (result) {
                if (result.code === 0) {
                    swal({
                        title: "注册成功",
                        text: "是否跳转至登录页?",
                        icon: "success",
                        buttons: true,
                        dangerMode: true,
                    }).then((flag) => {
                            if (flag) {
                                window.location.href = '/api/user/login';
                            }
                        });
                } else {
                    swal(result.msg, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });

    }
</script>
<style type="text/css">
    .form .login {
        width: 50%;
        height: 55%;
        margin: 10px auto;
        background: #fce4ec;
        color: #000;
        /*margin-right: 0px;*/
        border-radius: 4px;
        font: 12px "宋体", Times New Roman;
    }
    .form .login .login_center .login_main {
        padding: 0;
    }
    .form .login .login_center {
        width: 400px;
        margin: 15px auto;
        padding: 30px 0;
    }
    .form .login .login_center .login-info .login-info-input {
        width: 280px;
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px 10px;
    }
    .form .login .login_center .login_submit .submit {
        border: none;
        width: 300px;
        height: 45px;
        margin-left: 55px;
        background: #c80926;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 2px;
        cursor: pointer;
        border-radius: 4px;
    }
    .form {
        width: 100%;
        height: 80%;
        /*padding-top: 30px;*/
        background: url("https://uflower-imges.oss-cn-beijing.aliyuncs.com/uflower4.jpg") no-repeat center center;
    }
    #file_name{
        width: 230px;
        height: 30px;
    }
    a.input {
        width:50px;
        height:30px;
        line-height:30px;
        background:#3091d1;
        text-align:center;
        display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
        overflow:hidden;/*去掉的话，输入框也可以点击*/
        position:relative;/*相对定位，为 #file 的绝对定位准备*/
        top:10px;
    }
    a.input:hover {
        background:#31b0d5;
        color: #ffffff;
    }
    a{
        text-decoration:none;
        color:#FFF;
    }
    #file {
        opacity:0;/*设置此控件透明度为零，即完全透明*/
        filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
        font-size:100px;
        position:absolute;/*绝对定位，相对于 .input */
        top:0;
        right:0;
    }
</style>
</html>